<template>
  <div>
    <el-form class="p-form" ref="form" :model="form" label-position="left" label-width="180px">
      <el-form-item label="区域">
        <el-radio-group v-model="form.field1">
          <el-radio-button label="备份策略"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="策略名称">
        <el-input class="w233" v-model="form .field2" placeholder="请输入"></el-input>
      </el-form-item>
      <fbr></fbr>
      <el-form-item label="备份周期">
        <el-radio-group v-model="form.field3">
          <el-radio-button label="按周"></el-radio-button>
          <el-radio-button label="按天"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="radio1" @change="radio1Change">全选按钮</el-checkbox>
        <el-checkbox-group v-model="checkList1" v-if="form.field3 == '按周'">
          <el-checkbox label="周一"></el-checkbox>
          <el-checkbox label="周二"></el-checkbox>
          <el-checkbox label="显示一周七天复选"></el-checkbox>
        </el-checkbox-group>
        <div v-if="form.field3 == '按天'">每<el-input-number size="small" v-model="form.field7" style="width:215px" :min="1" :max="200"></el-input-number>天</div>
      </el-form-item>
      <el-form-item label="备份时间">
        <el-radio v-model="radio2" label="全选按钮" @change="radio2Change">全选按钮</el-radio>
        <el-radio v-model="radio2" label="反选按钮" @change="radio2Change">反选按钮</el-radio>
        <el-checkbox-group v-model="checkList2" v-if="form.field3 == '按周'">
          <el-checkbox label="00:00"></el-checkbox>
          <el-checkbox label="01:00"></el-checkbox>
          <el-checkbox label="显示一天24小时整点的复选"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="全量备份">
        <el-radio-group v-model="form.field4">
          <el-radio label="是"></el-radio>
          <el-radio label="否"></el-radio>
        </el-radio-group>
      </el-form-item>
      <fbr></fbr>
      <el-form-item label="保留类型">
        <el-radio-group v-model="form.field5">
          <el-radio-button label="按数量"></el-radio-button>
          <el-radio-button label="按时间"></el-radio-button>
          <el-radio-button label="永久保留"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="规则详情" v-if="form.field5=='按数量'">
        <el-input-number size="small" style="width:215px" v-model="form.field6" :min="1" :max="200"></el-input-number><span style="color: #AAA">只保留最新的份数</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        hasTag: false,
        form: {
          field1: '备份策略',
          field2: '',
          field3: '按周',
          field4: '是',
          field5: '按数量',
          field6: '',
          field7: '',
        },
        checkList1: [],
        checkList2: [],
        option: [
          {label: '东南中心', value: '东南中心'},
          {label: '南方中心', value: '南方中心'},
          {label: '北方中心', value: '北方中心'},
        ],
        radio1: null,
        radio2: null,
      }
    },
    methods: {
      init() {},
      getFormData() {
        return JSON.parse(JSON.stringify(this.form))
      },
      delTag() {
        this.hasTag = false
        this.form.tagKey = ''
        this.form.tagVal = ''
      },
      usabelChange(val) {
        this.form.pcClass = ''
        this.form.pcType = ''
      },
      radio1Change(val) {
        if (val) {
          this.checkList1 = ["周一","周二","显示一周七天复选"]
        } else {
          this.checkList1 = []
        }
      },
      radio2Change(val) {
        console.log(val)
        if (val === '全选按钮') {
          this.checkList2 = ["00:00","01:00","显示一天24小时整点的复选"]
        } else {
          this.checkList2 = []
        }
      }
    }

  }
</script>

<style scoped lang="less">
  .p-form {
    /deep/.el-form-item__label {
      font-size: 16px;
      font-family: 'PingFang SC ', 'PingFang SC';
      font-weight: 650;
      font-style: normal;
      color: rgba(0, 0, 0, 0.847058823529412);
    }
  }

  .addnum {
    display: flex;

    .explain {
      margin-left: 10px;
      line-height: 50px;
      font-size: 12px;
      color: #AAAAAA;
    }
  }

  .form-br {
    height: 1px;
    background-color: #ebebeb;
    width: 100%;
    margin-bottom: 15px;
  }

  .role-desbox {
    width: 932px;
    min-height: 125px;

    .escplasin {
      margin-left: 10px;
      font-size: 12px;
      color: #AAAAAA;
    }

    .esclist {
      height: 50px;
      display: flex;
      align-items: center;

      div {
        color: #333333;
        width: 160px;
        text-align: center;
      }
    }

    .esclist-t {
      height: 35px;
      background-color: rgba(242, 242, 242, 1);
    }

  }

  .tag-btn {
    margin-right: 15px;
    height: 22px;
    width: 22px;
    line-height: 22px;
    text-align: center;
    border: 1px #1890FF solid;
    border-radius: 50%;
    color: #1890FF;

    &:hover {
      background-color: #1890FF;
      color: #ffffff;
    }
  }

  /deep/.el-radio-button {

    border-radius: 4px;
    overflow: hidden;
  }

  /deep/.el-radio-button {
    .el-radio-button__inner {
      background-color: rgba(188, 223, 255, 1);
      color: #716E6E;
      font-size: 16px;
    }

    &.is-active {
      .el-radio-button__inner {
        background-color: #1890FF;
        color: #ffffff;

      }
    }
  }

  .pcarea3 {
    font-size: 12px;
    color: #FF3636;
  }
</style>
